import React, { useState } from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import { Input, Icon } from "@rneui/themed";
import { useSelector, useDispatch } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import AssetList from '../components/AssetList'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import CommonContext from '@/utils/createContext'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenSendSelectAsset = (props) => {

    const dispatch = useDispatch()
    const [inputValue, setInputValue] = useState('');
    const safeAssetList = useSelector((state) => state.sectokenMainReducer.safeAssetList || []);

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    const handlePressItem = (item) => {
        dispatch({ type: "setSelectedSafeAsset", value: item || {} })
        props.navigation.navigate('safe-send-info')
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenCommonCenterProps} {...{ title: 'Select an asset' }} handlePressLeft={handlePressLeft} />
            <View style={styles.bodyContent}>
                <Input
                    leftIcon={<Icon type="antdesign" name="search1" size={22} color='#0A6EEB' />}
                    leftIconContainerStyle={{ marginRight: 14 * ratio }}
                    containerStyle={styles.text_input}
                    onChangeText={text => setInputValue(text)}
                    value={inputValue}
                    placeholder='Search or type URL'
                    placeholderTextColor='#B3B3B3'
                    inputContainerStyle={{ borderBottomWidth: 0 }}
                    inputStyle={styles.title1}
                />
                <CommonContext.Provider value={{ safeAssetList, handlePressItem }}>
                    <AssetList />
                </CommonContext.Provider>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    bodyContent: {
        flex: 1,
        alignItems: 'center',
        marginTop: 10 * ratio
    },
    text_input: {
        width: 330 * ratio,
        height: 45 * ratio,
        backgroundColor: '#F7F7F7',
        borderRadius: 5
    },
    title1: {
        fontSize: 14,
        fontWeight: '500',
        lineHeight: 21,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN'
    }
})
export default SectokenSendSelectAsset